<template>
  <div>
    <v-card title="词云随机字体颜色">
      <vcu-chart-wordcloud :data="chartData" :settings="chartSettings" />
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        measures: [
          {
            name: "visualMap",
            value: 148,
          },
          {
            name: "continuous",
            value: 101,
          },
          {
            name: "contoller",
            value: 24,
          },
          {
            name: "series",
            value: 523,
          },
          {
            name: "gauge",
            value: 110,
          },
          {
            name: "detail",
            value: 34,
          },
          {
            name: "piecewise",
            value: 69,
          },
          {
            name: "textStyle",
            value: 179,
          },
          {
            name: "markPoint",
            value: 136,
          },
          {
            name: "pie",
            value: 197,
          },
          {
            name: "roseType",
            value: 31,
          },
          {
            name: "label",
            value: 193,
          },
          {
            name: "emphasis",
            value: 109,
          },
          {
            name: "yAxis",
            value: 239,
          },
          {
            name: "name",
            value: 124,
          },
          {
            name: "type",
            value: 151,
          },
          {
            name: "gridIndex",
            value: 71,
          },
          {
            name: "normal",
            value: 222,
          },
          {
            name: "itemStyle",
            value: 183,
          },
          {
            name: "min",
            value: 67,
          },
          {
            name: "silent",
            value: 75,
          },
          {
            name: "animation",
            value: 69,
          },
          {
            name: "offsetCenter",
            value: 15,
          },
          {
            name: "inverse",
            value: 60,
          },
          {
            name: "borderColor",
            value: 69,
          },
          {
            name: "markLine",
            value: 128,
          },
          {
            name: "line",
            value: 277,
          },
          {
            name: "radiusAxis",
            value: 81,
          },
          {
            name: "radar",
            value: 126,
          },
          {
            name: "data",
            value: 246,
          },
          {
            name: "dataZoom",
            value: 156,
          },
          {
            name: "tooltip",
            value: 208,
          },
          {
            name: "toolbox",
            value: 158,
          },
          {
            name: "geo",
            value: 130,
          },
          {
            name: "parallelAxis",
            value: 63,
          },
          {
            name: "parallel",
            value: 72,
          },
          {
            name: "max",
            value: 58,
          },
          {
            name: "bar",
            value: 207,
          },
          {
            name: "heatmap",
            value: 55,
          },
          {
            name: "map",
            value: 142,
          },
          {
            name: "animationDuration",
            value: 58,
          },
          {
            name: "animationDelay",
            value: 49,
          },
          {
            name: "splitNumber",
            value: 71,
          },
          {
            name: "axisLine",
            value: 112,
          },
          {
            name: "lineStyle",
            value: 140,
          },
          {
            name: "splitLine",
            value: 84,
          },
          {
            name: "axisTick",
            value: 93,
          },
          {
            name: "axisLabel",
            value: 132,
          },
          {
            name: "pointer",
            value: 24,
          },
          {
            name: "color",
            value: 153,
          },
          {
            name: "title",
            value: 196,
          },
          {
            name: "formatter",
            value: 123,
          },
          {
            name: "slider",
            value: 85,
          },
          {
            name: "legend",
            value: 257,
          },
          {
            name: "grid",
            value: 168,
          },
          {
            name: "smooth",
            value: 35,
          },
          {
            name: "smoothMonotone",
            value: 26,
          },
          {
            name: "sampling",
            value: 27,
          },
          {
            name: "feature",
            value: 113,
          },
          {
            name: "saveAsImage",
            value: 51,
          },
          {
            name: "polar",
            value: 79,
          },
          {
            name: "calculable",
            value: 29,
          },
          {
            name: "backgroundColor",
            value: 97,
          },
          {
            name: "excludeComponents",
            value: 11,
          },
          {
            name: "show",
            value: 143,
          },
          {
            name: "text",
            value: 50,
          },
          {
            name: "icon",
            value: 52,
          },
          {
            name: "dimension",
            value: 21,
          },
          {
            name: "inRange",
            value: 32,
          },
          {
            name: "animationEasing",
            value: 54,
          },
          {
            name: "animationDurationUpdate",
            value: 47,
          },
          {
            name: "animationDelayUpdate",
            value: 47,
          },
          {
            name: "animationEasingUpdate",
            value: 47,
          },
          {
            name: "xAxis",
            value: 299,
          },
          {
            name: "angleAxis",
            value: 73,
          },
          {
            name: "showTitle",
            value: 22,
          },
          {
            name: "dataView",
            value: 52,
          },
          {
            name: "restore",
            value: 30,
          },
          {
            name: "timeline",
            value: 100,
          },
          {
            name: "range",
            value: 21,
          },
          {
            name: "value",
            value: 75,
          },
          {
            name: "precision",
            value: 29,
          },
          {
            name: "target",
            value: 37,
          },
          {
            name: "zlevel",
            value: 73,
          },
          {
            name: "symbol",
            value: 93,
          },
          {
            name: "interval",
            value: 89,
          },
          {
            name: "symbolSize",
            value: 72,
          },
          {
            name: "showSymbol",
            value: 35,
          },
          {
            name: "inside",
            value: 94,
          },
          {
            name: "xAxisIndex",
            value: 61,
          },
          {
            name: "orient",
            value: 64,
          },
          {
            name: "boundaryGap",
            value: 71,
          },
          {
            name: "nameGap",
            value: 69,
          },
          {
            name: "zoomLock",
            value: 23,
          },
          {
            name: "hoverAnimation",
            value: 48,
          },
          {
            name: "legendHoverLink",
            value: 59,
          },
          {
            name: "stack",
            value: 53,
          },
          {
            name: "throttle",
            value: 21,
          },
          {
            name: "connectNulls",
            value: 29,
          },
          {
            name: "clipOverflow",
            value: 28,
          },
          {
            name: "startValue",
            value: 23,
          },
          {
            name: "minInterval",
            value: 57,
          },
          {
            name: "opacity",
            value: 55,
          },
          {
            name: "splitArea",
            value: 69,
          },
          {
            name: "filterMode",
            value: 25,
          },
          {
            name: "end",
            value: 20,
          },
          {
            name: "left",
            value: 80,
          },
          {
            name: "funnel",
            value: 47,
          },
          {
            name: "lines",
            value: 80,
          },
          {
            name: "baseline",
            value: 20,
          },
          {
            name: "align",
            value: 51,
          },
          {
            name: "coord",
            value: 29,
          },
          {
            name: "nameTextStyle",
            value: 86,
          },
          {
            name: "width",
            value: 65,
          },
          {
            name: "shadowBlur",
            value: 67,
          },
          {
            name: "effect",
            value: 30,
          },
          {
            name: "period",
            value: 15,
          },
          {
            name: "areaColor",
            value: 25,
          },
          {
            name: "borderWidth",
            value: 60,
          },
          {
            name: "nameLocation",
            value: 66,
          },
          {
            name: "position",
            value: 108,
          },
          {
            name: "containLabel",
            value: 41,
          },
          {
            name: "scatter",
            value: 103,
          },
          {
            name: "areaStyle",
            value: 72,
          },
          {
            name: "scale",
            value: 62,
          },
          {
            name: "pieces",
            value: 20,
          },
          {
            name: "categories",
            value: 31,
          },
          {
            name: "selectedMode",
            value: 61,
          },
          {
            name: "itemSymbol",
            value: 16,
          },
          {
            name: "effectScatter",
            value: 84,
          },
          {
            name: "fontStyle",
            value: 58,
          },
          {
            name: "fontSize",
            value: 58,
          },
          {
            name: "margin",
            value: 32,
          },
          {
            name: "iconStyle",
            value: 47,
          },
          {
            name: "link",
            value: 36,
          },
          {
            name: "axisPointer",
            value: 72,
          },
          {
            name: "showDelay",
            value: 29,
          },
          {
            name: "graph",
            value: 148,
          },
          {
            name: "subtext",
            value: 37,
          },
          {
            name: "selected",
            value: 53,
          },
          {
            name: "barCategoryGap",
            value: 28,
          },
          {
            name: "barGap",
            value: 33,
          },
          {
            name: "barWidth",
            value: 39,
          },
          {
            name: "coordinateSystem",
            value: 60,
          },
          {
            name: "barBorderRadius",
            value: 16,
          },
          {
            name: "z",
            value: 63,
          },
          {
            name: "polarIndex",
            value: 38,
          },
          {
            name: "shadowOffsetX",
            value: 55,
          },
          {
            name: "shadowColor",
            value: 61,
          },
          {
            name: "shadowOffsetY",
            value: 49,
          },
          {
            name: "height",
            value: 44,
          },
          {
            name: "barMinHeight",
            value: 23,
          },
          {
            name: "lang",
            value: 11,
          },
          {
            name: "symbolRotate",
            value: 52,
          },
          {
            name: "symbolOffset",
            value: 50,
          },
          {
            name: "showAllSymbol",
            value: 30,
          },
          {
            name: "transitionDuration",
            value: 31,
          },
          {
            name: "bottom",
            value: 61,
          },
          {
            name: "fillerColor",
            value: 15,
          },
          {
            name: "nameMap",
            value: 35,
          },
          {
            name: "barMaxWidth",
            value: 27,
          },
          {
            name: "radius",
            value: 45,
          },
          {
            name: "center",
            value: 49,
          },
          {
            name: "magicType",
            value: 57,
          },
          {
            name: "labelPrecision",
            value: 15,
          },
        ],
      },
      chartSettings: {
        textStyle: {
          normal: {
            color: function () {
              return (
                "rgb(" +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(",") +
                ")"
              );
            },
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
